<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教室首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--    <link rel="stylesheet" href="static/bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css" media="all">-->
<!--    <script src="static/bootstrap/bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js" charset="utf-8"></script>-->
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="demoTable">
                <div class="layui-inline">
                    <input class="layui-input" name="classroomName" id="demoReload" placeholder="班级名称">
                </div>

                <div class="layui-inline">
                    <select class="layui-inline" name="classroomType" id="demoReload02" style="display: inline-block;height: 35px">
                        <option value=""selected>请选择类别</option>
                        <option value="普通教室">普通教室</option>
                        <option value="多功能教室">多功能教室</option>
                    </select>
                </div>

                <div class="layui-inline">
                    <select class="layui-inline" name="classroomStatus" id="demoReload03" style="display: inline-block;height: 35px">
                        <option value="" selected>请选择状态</option>
                        <option value="1">启用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-hide" id="classroomtab" lay-filter="classroomtab"></table>
        </div>
    </div>
</div>


<!--头工具-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="setStatus">禁用</button>
        <button class="layui-btn layui-btn-sm" lay-event="inkStatus">启用</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteMul">删除</button>
    </div>
</script>

<!--行工具-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['table','form'], function() {
        //引入模块
        var table = layui.table;
        var form=layui.form;

        //搜索框
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var demoReload02 = $('#demoReload02');
                var demoReload03= $('#demoReload03');

                //执行重载
                table.reload('testReload', {
                    url:"/classroom/classroomSelectDim"
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        classroomName:demoReload.val()
                        ,classroomType:demoReload02.val()
                        ,classroomStatus:demoReload03.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });





        //触发头工具栏的事件 classroomtab表格id
        table.on('toolbar(classroomtab)', function(obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            console.log(checkStatus.date);
            switch (obj.event){
                //获取单元格数据
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                    //新增
                case 'getData':

                    form.val('myform03',{
                        "classroomId":""
                        ,"classroomName": "" // "name": "value"
                        ,"classroomType":  ""
                        ,"classroomUseType":  ""
                        ,"classroomPosition":  ""
                        ,"closeCapacity":  ""
                        ,"classroomStatus": ""
                    });
                    form.on('submit(frmsub)',function(data){
                        var da=data.field;
                        let url=$("#myform03").attr("action",'/classroomIsertinto');
                        $.ajax({
                            url:'/classroom/classroomIsertinto'
                            ,data:JSON.stringify(da)
                            ,type:'post'//get查/post增/delete删/put改
                            ,dataType:'json'
                            ,contentType:'application/json'
                            ,success:function (data) {
                                if(data.code==0){
                                    alert("新增成功");
                                    table.reload("testReload");
                                    layer.close(zlayer)
                                }else if(data.code){
                                    alert("新增失败");
                                    layer.close(zlayer)
                                }
                            }
                        });
                        return false;
                    });

                    //弹出层
                    zlayer=layer.open({
                        title: '新增教室信息',//弹出层名称
                        type: 1,
                        area: ['60%','80%'],
                        content: $("#popups03"),//关联弹出层
                        shade:0 ,//遮罩(透明度)为0
                    });
                    break;
                    //禁止状态
                case 'setStatus':
                    var data = checkStatus.data;
                    var idList = new Array();
                    for (let i = 0; i < data.length; i++) {
                        idList.push(data[i].classroomId)
                    }
                    // layer.alert(layui.util.escape(JSON.stringify(idList)));
                    $.ajax({
                        url:'/classroom/classroomUpdateStatusMul'
                        ,data:JSON.stringify({
                            classroomIds:idList,
                            classroomStatus:2
                        })
                        ,type:'put'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data) {
                            if(data.code==0){
                                alert("修改成功");
                                table.reload("testReload")
                            }else if(data.code){
                                alert("修改失败")
                            }
                        }
                    });
                    return false;
                    break;

                    //启用
                case 'inkStatus':
                    var data = checkStatus.data;
                    var idList = new Array();
                    for (let i = 0; i < data.length; i++) {
                        idList.push(data[i].classroomId)
                    }
                    // layer.alert(layui.util.escape(JSON.stringify(idList)));
                    $.ajax({
                        url:'/classroom/classroomUpdateStatusMul'
                        ,data:JSON.stringify({
                            classroomIds:idList,
                            classroomStatus:1
                        })
                        ,type:'put'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data) {
                            if(data.code==0){
                                alert("修改成功");
                                table.reload("testReload")
                            }else if(data.code){
                                alert("修改失败")
                            }
                        }
                    });
                    return false;
                    break;

                    //删除
                case 'deleteMul':
                    var data = checkStatus.data;
                    var idList = new Array();
                    for (let i = 0; i < data.length; i++) {
                        idList.push(data[i].classroomId)
                    }
                    // layer.alert(layui.util.escape(JSON.stringify(idList)));
                    $.ajax({
                        url:'/classroom/classroomDeleteMul'
                        ,data:JSON.stringify({
                            classroomIds:idList
                        })
                        ,type:'delete'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data) {
                            if(data.code==0){
                                alert("删除成功")
                                table.reload("testReload")
                            }else if(data.code){
                                alert("删除失败")
                            }
                        }
                    });
                    return false;
                    break;

            }
        });
        //触发单元格行工具事件
        table.on('tool(classroomtab)', function(obj){ // 双击 toolDouble
            var data = obj.data;//获取当前行的数据
            //console.log(obj);
            if(obj.event === 'del'){
                layer.confirm('确定删除当前教室信息?', function(index){
                    layer.msg(JSON.stringify({classroomId:data.classroomId}));
                    var dd={classroomId:data.classroomId};
                    $.ajax({
                        url:"/classroom/classroomDeleteOne"
                        ,data:JSON.stringify(dd)
                        ,type:'delete'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data){
                            if(data.code==0){
                                alert("删除成功");
                                table.reload("testReload");
                                obj.del();//在页面删除
                            }else if(data.code){
                                alert("删除失败")
                            }
                        }
                    });
                    layer.close(index);
                });
                //修改
            } else if(obj.event === 'update'){
                //表单赋值,弹出层lay-filter的值
                  form.val('myform',{
                        "classroomId":data.classroomId
                        ,"classroomName": data.classroomName // "name": "value"
                        ,"classroomType":  data.classroomType
                        ,"classroomUseType":  data.classroomUseType
                        ,"classroomPosition":  data.classroomPosition
                        ,"classroomCapacity":  data.classroomCapacity
                        ,"classroomStatus":  data.classroomStatus
                  });
                  form.on('submit(frmsub)',function(data){
                      var da=data.field;
                      let url=$("#myform").attr("action",'/classroom/classroomUpdate');
                      $.ajax({
                          url:'/classroom/classroomUpdate'
                          ,data:JSON.stringify(da)
                          ,type:'put'//get查/post增/delete删/put改
                          ,dataType:'json'
                          ,contentType:'application/json'
                          ,success:function (data) {
                              if(data.code==0){
                                  alert("修改成功");
                                  table.reload("testReload");
                                  layer.close(xlayer);
                              }else if(data.code){
                                  alert("修改失败");
                                  layer.close(xlayer);
                              }
                          }
                      });
                      return false;
                  });
                //弹出层
                xlayer=layer.open({
                    title: '修改教室信息',//弹出层名称
                    type: 1,
                    area: ['40%','80%'],
                    content: $("#popups"),//关联弹出层
                    shade:0 ,//遮罩(透明度)为0
                });
                layer.close()
                //查看
            }else if(obj.event === 'edit'){
                //表单赋值,弹出层lay-filter的值
                form.val('myform02',{
                    "classroomName": data.classroomName // "name": "value"
                    ,"classroomType":  data.classroomType
                    ,"classroomUseType":  data.classroomUseType
                    ,"classroomPosition":  data.classroomPosition
                    ,"classroomCapacity":  data.classroomCapacity
                    ,"classroomStatus":  data.classroomStatus
                });


                //弹出层
                layer.open({
                    title: '查看教室信息',//弹出层名称
                    type: 1,
                    area: ['40%','80%'],
                    content: $("#popups02"),//关联弹出层
                    shade:0 ,//遮罩(透明度)为0
                });
            }
        });

        // 表格渲染实例
        table.render({
            elem: '#classroomtab'
            , url: '/classroom/classroomSelectAll' // 此处为静态模拟数据，实际使用时需换成真实接口
            , toolbar: '#toolbarDemo'
            //右侧图标功能
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: '600px' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , page: true
            //渲染表格加id实现搜索功能
            ,id: 'testReload'
            ,limit:50
            , limits:[10,20,30,40,50]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'classroomId', title: '序号', sort: true}
                , {field: 'classroomName', title: '教室名称'}
                , {field: 'classroomType', title: '教室类别', sort: true}
                , {field: 'classroomUseType', title: '使用类型'}
                /* ,{field:'classroom', title: '适用班级', width: '30%', }*/
                , {field: 'classroomPosition', title: '所在位置', sort: true}
                , {field: 'classroomCapacity', title: '可容人数', sort: true}
                , {field: 'classroomStatus', title: '状态',templet:function (data){
                        if(data.classroomStatus==1)
                            return '<span style="color: #00FF00">启用</span>';
                        else
                            return '<span style="color: red">禁用</span>';
                    }}
                , {fixed: 'right', title: '操作', minWidth: 200, toolbar: '#barDemo'}
            ]]
        });

    });
</script>


<!--新增弹出层-->
<div style="padding: 16px;display:none" id="popups03" >
    <form class="layui-form" action="" id="myform03" lay-filter="myform03">

        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label" style="width: auto">教室序号</label>
            <div class="layui-input-block">
                <input type="text" name="classroomId" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室名称</label>
            <div class="layui-input-block">
                <input type="text" name="classroomName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室类别</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="classroomType">
                        <option value="" >请选择类别</option>
                        <option  value="普通教室">普通教室</option>
                        <option value="多功能教室">多功能教室</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">使用类型</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="classroomUseType">
                        <option value="">请选择使用类型</option>
                        <option value="固定使用" >固定使用</option>
                        <option value="轮班使用">轮班使用</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">所在位置</label>
            <div class="layui-input-block">
                <input type="text" name="classroomPosition" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">可容人数</label>
            <div class="layui-input-block">
                <select name="classroomCapacity">
                    <option value="">请选择可容人数</option>
                    <option value="80" >80</option>
                    <option value="160">160</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室状态</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="classroomStatus">
                        <option value="">请选择状态</option>
                        <option value="1" >启用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
        </div>
        <!--提交按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmsub">确定新增</button>
            </div>
        </div>
    </form>
</div>


<!--查看弹出层-->
<div style="padding: 16px;display:none" id="popups02" >
    <form class="layui-form" action="" id="myform02" lay-filter="myform02">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室名称</label>
            <div class="layui-input-block">
                <input  disabled type="text" name="classroomName" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室类别</label>
            <div class="layui-input-block">
                <input type="text" name="classroomType" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">使用类型</label>
            <div class="layui-input-block">
                <input disabled type="text" name="classroomUseType" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">所在位置</label>
            <div class="layui-input-block">
                <input disabled type="text" name="classroomPosition" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">可容人数</label>
            <div class="layui-input-block">
                    <select name="classroomCapacity" disabled>
                        <option value="">请选择可容人数</option>
                        <option value="80" >80人</option>
                        <option value="160">160人</option>
                    </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">教室状态</label>
            <div class="layui-input-inline">
                <select name="classroomStatus" disabled>
                    <option value="">请选择状态</option>
                    <option value="1" >启用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
    </form>
</div>


<!--修改弹出层-->
    <div style="padding: 16px;display:none" id="popups" >
        <form class="layui-form" action="" id="myform" lay-filter="myform">

            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label" style="width: auto">教室序号</label>
                <div class="layui-input-block">
                    <input type="text" name="classroomId" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">教室名称</label>
                <div class="layui-input-block">
                    <input type="text" name="classroomName" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">教室类别</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <select name="classroomType">
                            <option value="">请选择类别</option>
                            <option  value="普通教室" >普通教室</option>
                            <option value="多功能教室">多功能教室</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">使用类型</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <select name="classroomUseType">
                            <option value="">请选择使用类型</option>
                            <option value="固定使用" >固定使用</option>
                            <option value="轮班使用">轮班使用</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">所在位置</label>
                <div class="layui-input-block">
                    <input type="text" name="classroomPosition" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">可容人数</label>
                <div class="layui-input-block">
                    <select name="classroomCapacity">
                        <option value="">请选择可容人数</option>
                        <option value="80" >80</option>
                        <option value="160">160</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">教室状态</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <select name="classroomStatus">
                            <option value="">请选择状态</option>
                            <option value="1" >启用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
            <!--提交按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">

                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmsub">确定修改</button>
                </div>
            </div>
        </form>
    </div>



<script type="text/javascript">
    $(function () {
        $("#layui-layer9 > span.layui-layer-setwin > a").click(function (){
            $("#popups").css("display","none");
            $("#popups02").css("display","none")
        });
        $("#layui-layer3 > span.layui-layer-setwin > a").click(function (){
            $("#popups").css("display","none");
            $("#popups02").css("display","none")
        })
    });
</script>
</body>
</html>